import React, { useRef, useState } from "react";
import "./App.css";

function App() {
  const [url, setUrl] = useState("");
  // 通过 ref 获取节点
  const input = useRef<HTMLInputElement | null>(null);
  const handleClick = () => {
    // ts 非空验证
    if (!input.current) return;

    // 执行 input 点击事件
    input.current.click();
  };

  const handleChange = () => {
    // ts 非空验证
    if (!input.current) return;
    if (!input.current.files) return;
    // 获取上传的文件
    const file = input.current.files[0];
    const { type } = file;

    // 类型判断
    if (!type.includes("image")) return alert("只可以上传图片");

    // 本地读取图片
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.addEventListener("load", () => {
      const url = fileReader.result as string;
      setUrl(url);
      console.log(url);
    });
  };

  return (
    <div className="App">
      <div className="upload">
        <input
          ref={input}
          type="file"
          style={{ display: "none" }}
          onChange={() => handleChange()}
        ></input>
        <button onClick={() => handleClick()}>上传文件</button>
        <img src={url} alt="" />
      </div>
    </div>
  );
}

export default App;
